import React, { useCallback, useState } from "react";
import TextAtom from "../../Atoms/Text.Atom";
import TextAtomEnum from "../../Atoms/Text.Atom/enum";
import InputAtom from "../../Atoms/Input.Atom";
import { InputAtomEnum } from "../../Atoms/Input.Atom/enum";
import ButtonAtom from "../../Atoms/Button.Atom";
import ButtonAtomEnum from "../../Atoms/Button.Atom/enum";
import { useEditAdminProduct } from "@/business.InterfaceLayer/hooks/store/useAdminQueryStore/mutation/useEditAdminProduct";
import { AdminEditModalProps } from "./type";
import { adminProduct } from "@/business.InterfaceLayer/hooks/store/useAdminQueryStore/type";

const AdminEditModal: React.FC<AdminEditModalProps> = (props) => {
  const { product, t, onClickClose } = props;

  const [formData, setFormData] = useState<Partial<adminProduct>>(
    product || {}
  );

  const editProductMutation = useEditAdminProduct();

  const handleChange = useCallback(
    (field: keyof adminProduct, value: string | number | string[] | null) => {
      setFormData((prevFormData) => ({
        ...prevFormData,
        [field]: value || "",
      }));
    },
    []
  );

  const handleEditProduct = useCallback(async () => {
    try {
      // Отправляем запрос на редактирование товара
      await editProductMutation.mutateAsync({
        productId: product?.product_id || 0,
        updatedProductData: formData,
      });
      onClickClose?.();
    } catch (error) {
      console.error("Error editing product:", error);
    }
  }, [editProductMutation, formData, onClickClose, product]);

  return (
    <>
      <div className="flex overflow-y-auto flex-col gap-3 max-h-60 px-[16px]">
        <label className="flex flex-col gap-1">
          <TextAtom type={TextAtomEnum.enum_h5}>
            {t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelId.title"
            )}
          </TextAtom>
          <InputAtom
            type={InputAtomEnum.NUMBER}
            placeholder={t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelId.placeholder"
            )}
            value={formData?.product_id || ""}
            onChange={(value: string) =>
              handleChange("product_id", value ? parseInt(value) : null)
            }
          />
        </label>
        <label className="flex flex-col gap-1">
          <TextAtom type={TextAtomEnum.enum_h5}>
            {t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelImg_paths.title"
            )}
          </TextAtom>
          <InputAtom
            type={InputAtomEnum.TEXT}
            placeholder={t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelImg_paths.placeholder"
            )}
            value={formData?.img_paths || ""}
            onChange={(value: string) => handleChange("img_paths", value)}
          />
        </label>
        <label className="flex flex-col gap-1">
          <TextAtom type={TextAtomEnum.enum_h5}>
            {t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelTitle.title"
            )}
          </TextAtom>
          <InputAtom
            type={InputAtomEnum.TEXT}
            placeholder={t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelTitle.placeholder"
            )}
            value={formData?.title || ""}
            onChange={(value: string) => handleChange("title", value)}
          />
        </label>
        <label className="flex flex-col gap-1">
          <TextAtom type={TextAtomEnum.enum_h5}>
            {t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelBrand.title"
            )}
          </TextAtom>
          <InputAtom
            type={InputAtomEnum.TEXT}
            placeholder={t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelBrand.placeholder"
            )}
            value={formData?.brand || ""}
            onChange={(value: string) =>
              handleChange("brand", value ? parseInt(value) : null)
            }
          />
        </label>
        <label className="flex flex-col gap-1">
          <TextAtom type={TextAtomEnum.enum_h5}>
            {t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelCategory.title"
            )}
          </TextAtom>
          <InputAtom
            type={InputAtomEnum.TEXT}
            placeholder={t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelCategory.placeholder"
            )}
            value={formData?.category || ""}
            onChange={(value: string) => handleChange("category", value)}
          />
        </label>
        <label className="flex flex-col gap-1">
          <TextAtom type={TextAtomEnum.enum_h5}>
            {t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelRefinement.title"
            )}
          </TextAtom>
          <InputAtom
            type={InputAtomEnum.TEXT}
            placeholder={t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelRefinement.placeholder"
            )}
            value={formData?.refinement || ""}
            onChange={(value: string) =>
              handleChange("refinement", value ? parseInt(value) : null)
            }
          />
        </label>
        <label className="flex flex-col gap-1">
          <TextAtom type={TextAtomEnum.enum_h5}>
            {t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelSubcategory.title"
            )}
          </TextAtom>
          <InputAtom
            type={InputAtomEnum.TEXT}
            placeholder={t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelSubcategory.placeholder"
            )}
            value={formData?.subcategory || ""}
            onChange={(value: string) => handleChange("subcategory", value)}
          />
        </label>
        <label className="flex flex-col gap-1">
          <TextAtom type={TextAtomEnum.enum_h5}>
            {t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelDes.title"
            )}
          </TextAtom>
          <InputAtom
            type={InputAtomEnum.TEXT}
            placeholder={t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelDes.placeholder"
            )}
            value={formData?.des || ""}
            onChange={(value: string) => handleChange("des", value)}
          />
        </label>
        <label className="flex flex-col gap-1">
          <TextAtom type={TextAtomEnum.enum_h5}>
            {t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelPrice.title"
            )}
          </TextAtom>
          <InputAtom
            type={InputAtomEnum.NUMBER}
            placeholder={t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelPrice.placeholder"
            )}
            value={formData?.price || ""}
            onChange={(value: string) =>
              handleChange("price", value ? parseInt(value) : null)
            }
          />
        </label>
        <label className="flex flex-col gap-1">
          <TextAtom type={TextAtomEnum.enum_h5}>
            {t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelColors.title"
            )}
          </TextAtom>
          <InputAtom
            type={InputAtomEnum.TEXT}
            placeholder={t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelColors.placeholder"
            )}
            value={formData?.colors || ""}
            onChange={(value: string) => handleChange("colors", value)}
          />
        </label>
        <label className="flex flex-col gap-1">
          <TextAtom type={TextAtomEnum.enum_h5}>
            {t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelSize.title"
            )}
          </TextAtom>
          <InputAtom
            type={InputAtomEnum.TEXT}
            placeholder={t?.(
              "AdminPage.productPage.modalWindow.editProducts.labelSize.placeholder"
            )}
            value={formData?.size || ""}
            onChange={(value: string) =>
              handleChange("size", value ? parseInt(value) : null)
            }
          />
        </label>
      </div>
      <div className="flex gap-5 justify-end mt-5">
        <ButtonAtom
          className="inline-flex items-center gap-2 bg-transparent text-textColor ring-[1px] ring-black ring-inset hover:ring-peach py-2 px-3 rounded-full"
          type={ButtonAtomEnum.enum_defaultButton}
          onClick={onClickClose}
        >
          <TextAtom className="uppercase" type={TextAtomEnum.enum_h5}>
            {t?.(
              "AdminPage.productPage.modalWindow.editProducts.button.cancel"
            )}
          </TextAtom>
        </ButtonAtom>
        <ButtonAtom
          className="inline-flex items-center gap-2 bg-[#fd784c] hover:bg-peach text-white py-2 px-3 rounded-full"
          type={ButtonAtomEnum.enum_defaultButton}
          onClick={handleEditProduct}
        >
          <TextAtom className="uppercase" type={TextAtomEnum.enum_h5}>
            {t?.("AdminPage.productPage.modalWindow.editProducts.button.edit")}
          </TextAtom>
        </ButtonAtom>
      </div>
    </>
  );
};
export default React.memo(AdminEditModal);
